/**
 * Token 查看工具
 * 用于打印和查看所有可用的 Ant Design Token
 * 
 * 使用方法：
 * 1. 在任意组件中导入：import { printAllTokens } from '@/utils/printAllTokens'
 * 2. 在 useEffect 中调用：printAllTokens(token)
 * 3. 打开浏览器控制台查看所有 Token
 */

import type { GlobalToken } from 'antd';

/**
 * 打印所有 Token 到控制台
 */
export const printAllTokens = (token: GlobalToken) => {
  console.group('🎨 Ant Design Global Tokens');
  
  // 1. 颜色相关
  console.group('🌈 Color Tokens');
  const colorTokens = Object.keys(token).filter(key => key.startsWith('color'));
  colorTokens.forEach(key => {
    console.log(`${key}: ${(token as any)[key]}`);
  });
  console.groupEnd();
  
  // 2. 尺寸相关
  console.group('📏 Size Tokens');
  const sizeTokens = ['fontSize', 'fontSizeLG', 'fontSizeSM', 'fontSizeXL', 
    'controlHeight', 'controlHeightLG', 'controlHeightSM', 'controlHeightXS',
    'lineHeight', 'lineHeightLG', 'lineHeightSM'];
  sizeTokens.forEach(key => {
    if ((token as any)[key] !== undefined) {
      console.log(`${key}: ${(token as any)[key]}`);
    }
  });
  console.groupEnd();
  
  // 3. 间距相关
  console.group('📐 Spacing Tokens');
  const spacingTokens = Object.keys(token).filter(key => 
    key.startsWith('padding') || key.startsWith('margin')
  );
  spacingTokens.forEach(key => {
    console.log(`${key}: ${(token as any)[key]}`);
  });
  console.groupEnd();
  
  // 4. 动画相关
  console.group('🎬 Motion Tokens');
  const motionTokens = Object.keys(token).filter(key => key.startsWith('motion'));
  motionTokens.forEach(key => {
    console.log(`${key}: ${(token as any)[key]}`);
  });
  console.groupEnd();
  
  // 5. 阴影相关
  console.group('🌟 Shadow Tokens');
  const shadowTokens = Object.keys(token).filter(key => 
    key.includes('Shadow') || key.includes('shadow')
  );
  shadowTokens.forEach(key => {
    console.log(`${key}: ${(token as any)[key]}`);
  });
  console.groupEnd();
  
  // 6. 圆角相关
  console.group('⭕ Border Radius Tokens');
  const radiusTokens = Object.keys(token).filter(key => key.includes('Radius'));
  radiusTokens.forEach(key => {
    console.log(`${key}: ${(token as any)[key]}`);
  });
  console.groupEnd();
  
  // 7. 所有 Token（完整列表）
  console.group('📋 All Tokens (Complete List)');
  console.log(token);
  console.groupEnd();
  
  console.groupEnd();
};

/**
 * 按类别分组 Token
 */
export const getTokensByCategory = (token: GlobalToken) => {
  return {
    color: Object.keys(token).filter(key => key.startsWith('color')),
    font: Object.keys(token).filter(key => 
      key.startsWith('font') || key.startsWith('lineHeight')
    ),
    size: Object.keys(token).filter(key => 
      key.includes('Height') || key.includes('Width') || key.includes('Size')
    ),
    spacing: Object.keys(token).filter(key => 
      key.startsWith('padding') || key.startsWith('margin')
    ),
    motion: Object.keys(token).filter(key => key.startsWith('motion')),
    shadow: Object.keys(token).filter(key => key.includes('Shadow')),
    border: Object.keys(token).filter(key => 
      key.includes('Border') || key.includes('border')
    ),
    control: Object.keys(token).filter(key => key.startsWith('control')),
    screen: Object.keys(token).filter(key => key.startsWith('screen')),
    zIndex: Object.keys(token).filter(key => key.startsWith('zIndex')),
    opacity: Object.keys(token).filter(key => key.startsWith('opacity')),
  };
};

/**
 * 搜索 Token
 */
export const searchTokens = (token: GlobalToken, keyword: string) => {
  const allKeys = Object.keys(token);
  const matched = allKeys.filter(key => 
    key.toLowerCase().includes(keyword.toLowerCase())
  );
  
  const result: Record<string, any> = {};
  matched.forEach(key => {
    result[key] = (token as any)[key];
  });
  
  return result;
};

/**
 * 生成 Token 文档（Markdown 格式）
 */
export const generateTokenDocs = (token: GlobalToken) => {
  const categories = getTokensByCategory(token);
  
  let markdown = '# Ant Design Token 完整列表\n\n';
  
  Object.entries(categories).forEach(([category, tokens]) => {
    markdown += `## ${category.toUpperCase()}\n\n`;
    markdown += '| Token | Value |\n';
    markdown += '|-------|-------|\n';
    
    tokens.forEach(tokenKey => {
      const value = (token as any)[tokenKey];
      markdown += `| \`${tokenKey}\` | ${value} |\n`;
    });
    
    markdown += '\n';
  });
  
  return markdown;
};

